window.addEventListener('load',function(){
    var row_left = document.querySelector('.row-left');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    // 我们鼠标经过row_left就显示和隐藏mask 遮挡层和big
    row_left.addEventListener('mouseover',function(){
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    row_left.addEventListener('mouseout',function(){
        mask.style.display = 'none';
        big.style.display = 'none';
    })
    // 鼠标移动
    row_left.addEventListener('mousemove',function(e){
        // 计算鼠标在盒子内的坐标
        var x =e.pageX - this.offsetLeft;
        var y =e.pageY - this.offsetTop;
        // 让鼠标在遮罩层 中间
        var maskX = x - mask.offsetWidth / 2 ;
        var maskY =  y - mask.offsetHeight / 2 ;
        // 遮挡层的最大移动距离
        var maskMax = row_left.offsetWidth - mask.offsetWidth;
        // 限制遮罩层的范围
        if(maskX <= 0 ){
            maskX = 0;
        }else if(maskX >= maskMax ){
            maskX = maskMax -3;
        }
        if(maskY <= 0){
            maskY = 0;
        }else if(maskY >= maskMax ){
            maskY = maskMax -3;
        }
        mask.style.left = maskX  +'px';
        mask.style.top = maskY +'px';
                
        // 大图
        var bigImg = document.querySelector('.bigImg');
        //大图片最大移动距离
        var bigMax = bigImg.offsetWidth - big.offsetWidth;
        // 大图的移动距离 x
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        bigImg.style.left = -bigX +'px';
        bigImg.style.top = -bigY +'px';
    })

})